<template>
  <div class="app-container">
    <div style="display: flex;flex-flow: row nowrap;margin-left: 9%">
      <div style="border:1px;background-color: #4e8dff; width: 6px;height: 20px"></div>
      <span style="margin-left: 10px">培训报名</span>
    </div>
    <el-form ref="baseForm" :model="baseForm" :rules="baseFormRules" label-width="140px"
             style="margin-left: 25%;">
      <el-row>
        <el-col :span="16">
          <el-form-item label="培训标题" prop="examineTitle">
            <el-input v-model="baseForm.examineTitle" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <el-form-item label="培训内容" prop="examineContents">
            <editor ref="editor" v-model="baseForm.examineContents" :readOnly="true" :min-height="192"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <el-form-item label="附件" prop="examineAttachFile">
            <file-upload v-model="baseForm.examineAttachFile" :isShowTip="false"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <el-form-item label="培训时间" prop="trainingTime">
            <el-date-picker
              v-model="baseForm.trainingTime"
              type="date"
              :picker-options="datePickerValid"
              style="width: 100%"
              disabled
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <el-form-item label="培训地点" prop="trainingPlace">
            <el-input v-model="baseForm.trainingPlace" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <el-form-item v-emoji label="描述" prop="missionDescribe">
            <el-input
              type="textarea"
              placeholder="请输入内容"
              v-model="baseForm.missionDescribe"
              maxlength="200"
              :rows="6"
              show-word-limit
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <el-form-item label="上传附件" prop="attachFile">
            <file-upload v-model="baseForm.attachFile"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div style="margin: 2% auto auto 40%;">
      <el-button class="form_button_item" @click="closeBtnHandler">取消</el-button>
      <el-button v-if="baseForm.isSubmitted <1 && isReceived && approveStatus!==-1" class="form_button_item" type="primary" @click="updateBtnHandler(1)">
        参与培训
      </el-button>
      <el-button v-if="baseForm.isSubmitted >0" class="form_button_item" type="primary" @click="updateBtnHandler(2)">
        修改
      </el-button>
      <el-button v-if="isReceived<1 && approveStatus!==-1" class="form_button_item" type="warning" @click="updateBtnHandler(0)">
        接受培训
      </el-button>

    </div>
  </div>
</template>

<script>
import {addTask, getTask, updateTask} from "@/api/examine/task/api";
import {getExamineUserInfo, updateExamineUser} from "@/api/examine/user/api";

export default {
  name: "Add",
  components: {},
  data() {
    return {
      datePickerValid: {
        disabledDate(time) {
          return time.getTime() <= new Date().getTime() - 8.64e7;
        }
      },
      title: "",
      cycleVal: '',
      deptName: '',
      isUpdate: false,
      rulesData: {},
      receiveData: {},
      saveBtnLoading: false,
      // 表单参数
      baseForm: {},
      isReceived: false,
      approveStatus: '',
      id: '',
      // 表单校验
      baseFormRules: {
        // missionDescribe: [
        //   {required: true, message: "请填写任务内容", trigger: "blur"}
        // ],
        // attachFile: [
        //   {required: true, message: "请上传附件", trigger: "change"}
        // ]
      }
    }
  },
  created() {
    this.initPage();
    this.$nextTick(()=>{
      this.$refs.editor.hideToolbar();
    })
  },
  methods: {
    initPage() {
      this.reset()
      this.id = this.$route.query.id;
      if (this.id) {
        this.isUpdate = true;
        getExamineUserInfo(this.id).then(resp => {
          this.baseForm.id = this.id
          this.baseForm = resp.data
          this.isReceived = resp.data.isReceived > 0
          this.approveStatus=resp.data.approveStatus
        })
      }
    },
    updateBtnHandler(data) {
      if (data > 0) {
        // 提交
        this.$refs["baseForm"].validate(valid => {
          if (valid) {
            this.saveBtnLoading = true;
            this.baseForm.isSubmitted = 1
            this.baseForm.status = 1
            updateExamineUser(this.baseForm).then(response => {
              if(data>1){
                this.$modal.msgSuccess("修改成功");
              }else{
                this.$modal.msgSuccess("参与成功");
              }
              // 清空页签缓存
              this.$tab.clearKeepAlivePage('MyTraining')
              this.closeBtnHandler();
            }).finally(() => {
              this.saveBtnLoading = false;
            })
          }
        });
      } else {
        // 接收
        this.saveBtnLoading = true;
        this.baseForm.isReceived = 1
        this.baseForm.status = 0
        updateExamineUser(this.baseForm).then(response => {
          this.$modal.msgSuccess("接受成功");
          this.isReceived = true
        }).finally(() => {
          this.saveBtnLoading = false;
        })
      }
    },
    closeBtnHandler() {
      this.reset()
      // 关闭当前页面
      this.$tab.closeOpenPage();
      // 刷新列表页面
      this.$tab.refreshPage({path: "/training/myTraining"});
    },
    // 表单重置
    reset() {
      this.baseForm = {
        missionDescribe: undefined,
        attachFile: undefined,
        isSubmitted: undefined,
        isReceived: undefined,
        status: undefined
      };
      this.resetForm("baseForm");
    }
  }
}
</script>

<style scoped>
::v-deep .el-input.is-disabled .el-input__inner {
  background-color: #fff;
  color: #606266;
}

::v-deep .el-textarea.is-disabled .el-textarea__inner {
  background-color: #fff;
  color: #606266;
}

::v-deep .el-radio__input.is-disabled + span.el-radio__label {
  background-color: #fff;
  color: #606266;
}
</style>
